import axios from 'axios';
import React, { useState, useEffect } from 'react';
import { message } from 'antd';
import { Switch, Route, Redirect, Link, NavLink } from 'react-router-dom'
import './Back.css'

const BackHome = () => {
  return (
    <div style={{ margin: 200 }}><h1>欢迎进入格物衍艺后台管理系统！</h1></div>
  )
}
const Manage = () => {
  const [list, setList] = useState([]);
  useEffect(() => {
    const url = "http://192.168.72.166:8080/api/getUsers";
    axios.get(url).then(res => {
      const data = res.data.data;
      data.forEach((item) => {
        let img = "http://192.168.72.166:8080/" + item.user_head_portrait;
        console.log(img)
        setList((list) => [
          ...list,
          {
            img: img,
            name: item.user_name,
            pwd: item.user_password,
            id: item.user_id,
            token: item.user_is_delete
          }

        ])

      });

    })
  }, [])
  const del = (id) => {
    axios.delete('http://192.168.72.166:8080/api/delUsers' + id)
      .then(res => {
        message.success('删除成功！')
      })
      .catch(error => {
        message.error("此用户删除涉及其作品，无法删除！")
      })
    const delit = document.getElementById('delit');
    const child = delit.parentNode.parentNode;
    const parent = delit.parentNode.parentNode.parentNode;
    parent.removeChild(child);

    window.location.reload();
  }
  return (
    <div className='manage'>
      <div className='manage_1'>
        <p style={{ marginLeft: "15px" }}>头像</p>
        <p style={{ marginLeft: "2px" }}>用户名</p>
        <p>密码</p>
        <p>操作</p>
      </div>
      <div>
        {
          list.map(item => {
            if (item.token == 0) {
              return (
                <div className='manage_2' id={item.id}>
                  <div><img src={item.img} /></div>
                  <p>{item.name}</p>
                  <p>{item.pwd}</p>
                  <div><button onClick={() => del(item.id)} id='delit'>删除</button></div>
                </div>
              )
            }
          })

        }
      </div>
    </div>
  )
}


const Devise = () => {
  const [desList, setdesList] = useState([]);
  const [userList, setuserList] = useState([]);
  const [listAll, setListAll] = useState([]);
  const [newList, setnewList] = useState([]);
  useEffect(() => {
    //design
    axios.get("http://192.168.72.166:8080/api/getUserDesignDatas").then(res => {
      const data = res.data.data;
      data.forEach((item) => {
        let img = "http://192.168.72.166:8080/" + item.design_image;
        item.design_image = img;
      });
      setdesList(data);
    })
    //User
    axios.get("http://192.168.72.166:8080/api/getUsers").then(res => {
      const datas = res.data.data;
      datas.forEach((item) => {
        let img = "http://192.168.72.166:8080/" + item.user_head_portrait;
        item.user_head_portrait = img
      });
      setuserList(datas)
    })
  }, [])
  useEffect(() => {
    let List = desList.map(el => {
      const newdata = userList.find(i => el.user_id == i.user_id);
      return {
        ...el,
        ...newdata
      }

    })
    setListAll(List);
  }, [desList, userList])
  useEffect(() => {
    let List = [];
    listAll.map(el => {
      if (!List.some(ele => ele.user_id == el.user_id)) {
        List.push(el)
      }
    })
    setnewList(List);
  }, [listAll])
  const del1 = (id) => {
    axios.delete('http://192.168.72.166:8080/api/delUserDesignDatas' + id)
      .then(res => {
        message.success('删除成功！')
      })
    const delit1 = document.getElementById('delit1');
    const child = delit1.parentNode;
    const parent = delit1.parentNode.parentNode;
    parent.removeChild(child);

    window.location.reload();
  }
  return (
    <div className='devise'>
      {
        newList.map(item => {
          if (item.design_is_delete == 0) {
            return (
              <div className='devise_1'>
                <div className='devise_1_1'>
                  <img src={item.user_head_portrait} />
                  <h1>{item.user_name}</h1>
                </div>
                <div className='devise_1_2'>
                  {
                    listAll.map(it => {
                      if (it.design_is_delete == 0 && it.user_id == item.user_id) {
                        return (
                          <div className='devise_1_21'>
                            <div>
                              <img src={it.design_image} />
                            </div>
                            <button>已推荐</button>
                            <button onClick={() => del1(it.design_id)} id='delit1'>删除</button>
                          </div>
                        )
                      }
                    })
                  }

                </div>
              </div>
            )
          }
        })
      }
    </div>
  )
}

const Upload = () => {
  const [uplList5, setuplList5] = useState([]);
  const [userList5, setuserList5] = useState([]);
  const [listAll5, setListAll5] = useState([]);
  const [newList5, setnewList5] = useState([]);
  useEffect(() => {
    //upload
    axios.get("http://192.168.72.166:8080/api/getUserUploadDatas").then(res => {
      const data = res.data.data;
      data.forEach((item) => {
        let img = "http://192.168.72.166:8080/" + item.upload_image;
        item.upload_image = img;
      });
      setuplList5(data);
    })

    //User
    axios.get("http://192.168.72.166:8080/api/getUsers").then(res => {
      const datas = res.data.data;
      datas.forEach((item) => {
        let img = "http://192.168.72.166:8080/" + item.user_head_portrait;
        item.user_head_portrait = img
      });
      setuserList5(datas)
    })
  }, [])

  useEffect(() => {
    let List = uplList5.map(el => {
      const newdata1 = userList5.find(i => el.user_id == i.user_id);
      return {
        ...el,
        ...newdata1
      }
    })
    setListAll5(List);
  }, [uplList5, userList5])
  console.log(listAll5)

  useEffect(() => {
    let List = [];
    listAll5.map(el => {
      if (!List.some(ele => ele.user_id == el.user_id)) {
        List.push(el)
      }
    })
    setnewList5(List);
  }, [listAll5])
  console.log(listAll5)

  const del5 = (id) => {
    console.log(id)
    axios.delete('http://192.168.72.166:8080/api/delUserUploadDatas/' + id)
      .then(res => {
        message.success('删除成功！')
      })
    const delit5 = document.getElementById('delit5');
    const child = delit5.parentNode;
    const parent = delit5.parentNode.parentNode;
    parent.removeChild(child);

    window.location.reload();
  }

  return (
    <div className='devise'>
      {
        newList5.map(item => {
          if (item.upload_is_delete == 0) {
            return (
              <div className='devise_1'>
                <div className='devise_1_1'>
                  <img src={item.user_head_portrait} />
                  <h1>{item.user_name}</h1>
                </div>
                <div className='devise_1_2'>
                  {
                    listAll5.map(it => {
                      if (it.upload_is_delete == 0 && it.user_id == item.user_id) {
                        return (
                          <div className='devise_1_21'>
                            <div>
                              <img src={it.upload_image} />
                            </div>
                            <button onClick={() => del5(it.upload_id)} id='delit5'>删除</button>
                          </div>
                        )
                      }
                    })
                  }

                </div>
              </div>
            )
          }
        })
      }
    </div>
  )
}

const Model = () => {
  const [list2, setList2] = useState([]);
  useEffect(() => {
    const url = "http://192.168.72.166:8080/api/getModelDatas";
    axios.get(url).then(res => {
      const data = res.data.data;
      console.log(data)
      data.forEach((item) => {
        let img;
        if (item.model_image) {
          img = "http://192.168.72.166:8080/" + item.model_image;
        } else {
          img = '暂无';
        }
        setList2((list) => [
          ...list,
          {
            img: img,
            name: item.model_name,
            clif: item.model_classification,
            id: item.model_id,
            token: item.model_is_delete
          }

        ])

      });

    })
  }, [])
  const del2 = (id) => {
    axios.delete('http://192.168.72.166:8080/api/delModelDatas/' + id)
      .then(res => {
        message.success('删除成功！')
      })
    const delit2 = document.getElementById('delit2');
    const child = delit2.parentNode.parentNode;
    const parent = delit2.parentNode.parentNode.parentNode;
    parent.removeChild(child);

    window.location.reload();
  }

  return (
    <div className='manage'>
      <div className='manage_1'>
        <p>模型id</p>
        <p>名称</p>
        <p>模型分类</p>
        <p>模型封面</p>
        <p>操作</p>
      </div>
      <div>
        {
          list2.map(item => {
            if (item.token == 0) {
              return (
                <div className='manage_2' id={item.id}>
                  <p>{item.id}</p>
                  <p>{item.name}</p>
                  <p>{item.clif}</p>
                  <p><img src={item.img} id='model-img' /></p>
                  <div><button onClick={() => del2(item.id)} id='delit2'>删除</button></div>
                </div>
              )
            }
          })

        }
      </div>
    </div>
  )
}
const Draw = () => {
  const [list4, setList4] = useState([]);
  useEffect(() => {
    const url = "http://192.168.72.166:8080/api/getDrawDatas";
    axios.get(url).then(res => {
      const data = res.data.data;
      console.log(data)
      data.forEach((item) => {
        let img;
        if (item.draw_image) {
          img = "http://192.168.72.166:8080/" + item.draw_image;
        } else {
          img = '暂无';
        }
        setList4((list) => [
          ...list,
          {
            img: img,
            name: item.draw_name,
            clif: item.draw_classification,
            id: item.draw_id,
            token: item.draw_is_delete
          }
        ])
      });

    })
  }, [])
  const del4 = (id) => {
    axios.delete('http://192.168.72.166:8080/api/delDrawDatas/' + id)
      .then(res => {
        message.success('删除成功！')
      })
    const delit4 = document.getElementById('delit4');
    const child = delit4.parentNode.parentNode;
    const parent = delit4.parentNode.parentNode.parentNode;
    parent.removeChild(child);

    window.location.reload();
  }
  return (
    <div className='manage'>
      <div className='manage_1'>
        <p>绘制id</p>
        <p>名称</p>
        <p>绘制分类</p>
        <p>绘制图片</p>
        <p>操作</p>
      </div>
      <div>
        {
          list4.map(item => {
            if (item.token == 0) {
              return (
                <div className='manage_2' id={item.id}>
                  <p>{item.id}</p>
                  <p>{item.name}</p>
                  <p>{item.clif}</p>
                  <p><img src={item.img} id='model-img' /></p>
                  <div><button onClick={() => del4(item.id)} id='delit4'>删除</button></div>
                </div>
              )
            }

          })

        }
      </div>
    </div>
  )
}
const Resource = () => {
  const [list3, setList3] = useState([]);
  useEffect(() => {
    const url = "http://192.168.72.166:8080/api/getCreationResourcesDatas";
    axios.get(url).then(res => {
      const data = res.data.data;
      data.forEach((item) => {
        let img = "http://192.168.72.166:8080/" + item.create_image;
        setList3((list) => [
          ...list,
          {
            img: img,
            name: item.create_name,
            content: item.create_content,
            id: item.create_id,
            recmed: item.create_is_recommend,
            token: item.create_is_delete
          }

        ])

      });

    })
  }, [])
  const del3 = (id) => {
    axios.delete('http://192.168.72.166:8080/api/delCreationResourcesDatas/' + id)
      .then(res => {
        message.success('删除成功！')
      })
    const delit3 = document.getElementById('delit3');
    const child = delit3.parentNode.parentNode;
    const parent = delit3.parentNode.parentNode.parentNode;
    parent.removeChild(child);

    window.location.reload();
  }

  return (
    <div className='resource'>
      <div className='manage_1'>
        <p>名称</p>
        <p>封面</p>
        <p>相关介绍</p>
        <p>操作</p>
      </div>
      <div>
        {
          list3.map(item => {
            if (item.token == 0) {
              return (
                <div className='resource_2'>
                  <p>{item.name}</p>
                  <p><img src={item.img} /></p>
                  <p>{item.content}</p>
                  <div>
                    <button>已推荐</button>
                    <button onClick={() => del3(item.id)} id='delit3'>删除</button>
                  </div>
                </div>
              )
            }
          })

        }
      </div>
    </div>
  )
}

const Content2 = () => {

  return (
    <div className='back'>
      <div className='back_1'>
        <img src={require('../images/logo.png')} />
        <h1>格物衍艺后台管理系统</h1>

      </div>
      <div className='back_2'>
        <NavLink to='/back/manage' activeClassName='back-active'><div>用户管理</div></NavLink>
        <NavLink to='/back/devise' activeClassName='back-active'><div>用户设计</div></NavLink>
        <NavLink to='/back/upload' activeClassName='back-active'><div>用户上传</div></NavLink>
        <NavLink to='/back/model' activeClassName='back-active'><div>模型素材</div></NavLink>
        <NavLink to='/back/draw' activeClassName='back-active'><div>绘制素材</div></NavLink>
        <NavLink to='/back/resource' activeClassName='back-active'><div>创作资源</div></NavLink>
        <Link to='/'><button>退出系统</button></Link>
      </div>

      <div>
        <Switch>
          <Route path="/back/manage"><Manage /></Route>
          <Route path="/back/devise"><Devise /></Route>
          <Route path="/back/upload"><Upload /></Route>
          <Route path="/back/model"><Model /></Route>
          <Route path="/back/draw"><Draw /></Route>
          <Route path="/back/resource"><Resource /></Route>
          <Route path="/back"><BackHome /></Route>
          <Redirect to='/back' />
        </Switch>
      </div>
    </div>
  )
}

export default Content2